<%--
  Created by IntelliJ IDEA.
  User: Lanan
  Date: 2017/12/25 0025
  Time: 13:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%--<%@ include file="/commons/basejs.jsp" %>--%>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>微信公众号交互内容修改</title>
</head>
<body>
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:100%;
        border-collapse:collapse;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        /*text-align: center;*/
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:10px}
</style>
<form id="updateContent" action="" method="post">
    <table class="grid" align="center">
        <input hidden="hidden" name="id" value="${content.id}"/>
        <tr style="height: 10px"></tr>
        <tr>
            <td align="right"><label>标题:</label></td>
            <td align="left"><input value="${content.title}" class="easyui-validatebox" name="title" data-options="missingMessage:'请输入标题',required:true"></td>
            <td rowspan="3" align="center"><lable for="intro">图片:</lable></td>
            <td rowspan="2" align="center">
                <div id="upload_ue"></div>
                <div>
                    <img id="contentImgUrl" src="${content.img}" align="center" height="90" width="90">
                    <input value="${content.img}" type="hidden" id="contentPicture" name="img" data-options="required:true"/>
                </div>
            </td>
        </tr>
        <tr>
            <td align="right"><lable for="type">上级交互:</lable></td>
            <td>
                <select id="content_update_content" class="easyui-combobox" name="wechatPublicInteractionId" data-options="missingMessage:'请选择上级交互',required:true,panelHeight:'auto',editable:false" style="width:140px;">
                </select>
                &nbsp;&nbsp;&nbsp;<label id="showReplyTypeLabel"></label>
            </td>
        </tr>
        <tr>
            <td align="right"><label>排序:</label></td>
            <td><input name="ord" value="${content.ord}" class="easyui-numberspinner" style="width: 140px;" required="required" data-options="required:false,editable:true,missingMessage:'请输入排序序号（大前小后）'"></td>
            <td align="center">
                <input id="submitImg" style="margin-left: 10px" type="button" onclick="upArticleImage()" value="上传图片">
            </td>
        </tr>
        <tr id="mediaId">
            <td align="right"><label>单图MediaId:</label></td>
            <td align="left"><input id="update_mediaId" class="easyui-validatebox" name="mediaId" value="${content.mediaId}" data-options="missingMessage:'请输入单图MediaId',required:true"></td>
        </tr>
        <tr id="contentInfo">
            <td align="right"><label>文本内容/描述:</label></td>
            <td colspan="2" align="left">
                <textarea id="update_content_intro" name="content" class="easyui-validatebox" data-options="missingMessage:'请输入交互文本内容',required:true" style="height:75px;width: 270px">${content.content}</textarea>
            </td>
        </tr>
        <tr id="hrefUrl">
            <td align="right"><label>跳转链接:</label></td>
            <td colspan="2" align="left">
                <input id="content_fref_url" class="easyui-validatebox" name="url" value="${content.url}" data-options="missingMessage:'请输入跳转链接',required:true" style="width: 270px">
            </td>
        </tr>
    </table>
    <div data-options="region:'south',border:false" style="height: 24px;text-align: center;position: absolute;bottom: 15px;width:100%" >
        <a class="easyui-linkbutton" icon="icon-save" onclick="updateContentInfo()">保存</a>
        <a class="easyui-linkbutton" icon="icon-cancel" onclick="$('#content_update_dialog').dialog('close');" >取消</a>
    </div>
</form>

<script type="text/javascript">
    var _editor;
    $(function() {
        $("#mediaId").hide();$("#update_mediaId").validatebox({ required: false});
        showOrHidden(${replyType})

        handelContentCombobox();
        selectOnSelectAction();

        //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _editor = UE.getEditor('upload_ue',{
            serverUrl:"${path}/file/upload.do?compress=1"
        });

        _editor.ready(function () {
            //设置编辑器不可用
            // _editor.setDisabled();
            //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
            _editor.hide();
            //侦听图片上传
            _editor.addListener('beforeInsertImage', function (t, arg) {
                //有多少张图片arg.length就是多大
                $("#contentPicture").val(arg[0].src);
                $("#contentImgUrl").attr('src',arg[0].src);
            });
        });
    });

    function upArticleImage() {
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }

    function handelContentCombobox() {
        $("#content_update_content").combobox({
            url : "${path}/wechat/public/number/content/getContentCombobox.do",
            valueField:'id',
            textField:'name',
            panelHeight : 'auto',
            editable:false,
            onLoadSuccess:function () {
                $("#content_update_content").combobox("setValue", ${content.wechatPublicInteractionId});
            }
        });
    }

    // 定义全局 提交时做判断处理
    var replyType = 0;
    // select 选择选项的逻辑处理
    function selectOnSelectAction() {
        $("#content_update_content").combobox({
            onSelect:function (value) {
                showOrHidden(value.replyType);
            }
        })
    }

    function showOrHidden(type) {
        switch (type) {
            // 纯文本
            case 0: {
                replyType = 0;
                $("#submitImg").hide();
                $("#hrefUrl").hide();$("#content_fref_url").validatebox({required: false});
                $("#contentInfo").show();$("#update_content_intro").validatebox({ required: true });
                $("#mediaId").hide();$("#update_mediaId").validatebox({ required: false});
                $("#showReplyTypeLabel").text("纯文本");
            } break;
            // 单图
            case 1: {
                replyType = 1;
                $("#submitImg").hide();
                $("#hrefUrl").hide();$("#content_fref_url").validatebox({required: false});
                $("#contentInfo").hide();$("#update_content_intro").validatebox({ required: false });
                $("#showReplyTypeLabel").text("单图");
                $("#mediaId").show();$("#update_mediaId").validatebox({ required: true});
            } break;
            // 单图文
            case 2: {
                replyType = 2;
                $("#submitImg").show();
                $("#hrefUrl").show();$("#content_fref_url").validatebox({required: true});
                $("#contentInfo").show();$("#update_content_intro").validatebox({ required: true });
                $("#showReplyTypeLabel").text("单图文");
                $("#mediaId").hide();$("#update_mediaId").validatebox({ required: false});
            } break;
            // 图文列表
            case 3: {
                replyType = 3;
                $("#submitImg").show();
                $("#hrefUrl").show();$("#content_fref_url").validatebox({required: true});
                $("#contentInfo").show();$("#update_content_intro").validatebox({ required: true });
                $("#showReplyTypeLabel").text("图文列表");
                $("#mediaId").hide();$("#update_mediaId").validatebox({ required: false});
            } break;
        }
    }

    function updateContentInfo() {
        if (replyType != 0 && replyType != 1) {
            var logo = $("#contentPicture").val();
            if (logo == null || logo.length <= 0 || logo == "") {
                $.messager.show({
                    title:"提示",
                    msg: "请上传相关图片！",
                    timeout:1000,style:"left:30%;top:10%",
                    showType:"fade"
                });
                return;
            }
        }
        var msg = "修改";
        var url = "${path}/wechat/public/number/content/update.do";
        lananUpdateOrInsert(msg, url, "updateContent", "content_update_dialog", "content_grid");
    }
</script>

</body>
</html>
